<template>
  <div class="container">
    <!-- 顶部卡片 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="6">
          <span>仓库名称</span>
          <el-input
            v-model="inputData.warehouseName"
            placeholder="请输入"
          />
        </el-col>
        <el-col :span="6">
          <span>库区名称</span>
          <el-input
            v-model="inputData.name"
            placeholder="请输入"
          />
        </el-col>
        <el-col :span="6">
          <span>仓库状态</span>
          <el-select
            v-model="inputData.status"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in statusList"
              :key="index"
              :value="item.value"
              :label="item.label"
            >
              <!-- {{ statusMap[item.status] }} -->
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button
            type="primary"
            size="mini"
            class="btn topBtn"
            @click="searchBtn"
          >搜索</el-button>
          <el-button
            size="mini"
            class="topBtn"
            @click="resetBtn"
          >重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 表格卡片 -->
    <el-card>
      <el-row type="flex" justify="space-between" align="middle" style="margin: 10px">
        <el-col :span="18">
          <el-button style="background-color: #00be76;color: #fff" @click="addNewArea">新增库区</el-button>
        </el-col>
        <el-col :span="6">
          <el-button>下载库区模板</el-button>
          <el-button>导入库区信息</el-button>
        </el-col>
      </el-row>
      <!-- 表格数据 -->
      <el-table
        :data="tableData"
        border
      >
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center"
        />
        <el-table-column
          label="所属仓库"
          prop="warehouseName"
          width="150"
          align="center"
        />
        <el-table-column
          label="库区编号"
          prop="code"
          width="150"
          align="center"
        />
        <el-table-column
          label="库区名称"
          prop="name"
          width="150"
          align="center"
        />
        <el-table-column
          label="温度类型"
          prop="temperatureType"
          width="150"
          align="center"
        >
          <template #default="scope">
            {{ temperatureTypeMap[scope.row.temperatureType] }}
          </template>
        </el-table-column>
        <el-table-column
          label="承重类型"
          prop="bearingType"
          width="150"
          align="center"
        >
          <template #default="scope">
            {{ bearingTypeMap[scope.row.bearingType] }}
          </template>
        </el-table-column>
        <el-table-column
          label="用途属性"
          prop="useType"
          width="150"
          align="center"
        >
          <template #default="scope">
            {{ useTypeMap[scope.row.useType] }}
          </template>
        </el-table-column>
        <el-table-column
          label="库区状态"
          prop="status"
          width="150"
          align="center"
        >
          <template #default="scope">
            {{ statusMap[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column
          label="负责人"
          prop="personName"
          width="150"
          align="center"
        />
        <el-table-column
          label="联系电话"
          prop="phone"
          width="150"
          align="center"
        />
        <el-table-column
          label="库位数量"
          prop="includedNum"
          width="150"
          align="center"
        />
        <el-table-column
          label="更新时间"
          prop="updateTime"
          width="150"
          align="center"
        />
        <el-table-column
          label="操作"
          width="150"
          fixed="right"
          align="center"
        >
          <template #default="scope">
            <el-button
              type="text"
              size="mini"
              @click="edit(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              size="mini"
              @click="switchBtn(scope.row)"
            >
              <!-- {{ status === 0 ? '停用' : '启用' }} -->
              {{ statusMap[Number(!scope.row.status)] }}
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="delBtn(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          :current-page="params.current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="+total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>

    <!-- 停用/开启 对话框 -->
    <el-dialog
      :title="'确认'+title"
      :visible="dialogVisible"
      width="40%"
    >
      <span>确定要{{ title }}库区： {{ name }} 吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { pageAreaDetail, getNextCode, changeArea, delArea } from '@/api'
export default {
  data() {
    return {
      // 参数
      params: {
        size: 10,
        current: 1
      },
      // 总条数
      total: 0,
      // 温度类型 映照关系
      temperatureTypeMap: {
        'CW': '常温',
        'LC': '冷藏',
        'HW': '恒温'
      },
      // 承重类型 映照关系
      bearingTypeMap: {
        'ZX': '重型',
        'QX': '轻型'
      },
      // 用途属性 映照关系
      useTypeMap: {
        'RKHCQ': '入库缓存区',
        'CKHCQ': '出库缓存区',
        'CCQ': '存储区',
        'FLQ': '分拣区',
        'ZJQ': '质检区'
      },
      // 库区状态 映照关系
      statusMap: {
        0: '停用',
        1: '启用'
      },
      // 库区表格数据
      tableData: [],
      // 输入框数据
      inputData: {
        name: '',
        warehouseName: '',
        status: ''
      },
      statusList: [
        { value: 0, label: '停用' },
        { value: 1, label: '启用' },
        { value: null, label: '全部' }
      ],
      // 下一个编码
      nextCode: '',
      id: '',
      status: '',
      // 库区名
      name: '',
      // 控制对话框显示与隐藏
      dialogVisible: false
    }
  },
  computed: {
    title() {
      return this.status === 0 ? '启用' : '停用'
    }
  },
  created() {
    this.inputData = {}
    this.pageAreaDetail(this.params)
  },
  methods: {
    // 获取分页查询库区详细信息
    async pageAreaDetail(val) {
      const { data } = await pageAreaDetail(val)
      console.log(data)
      this.total = data.total
      this.tableData = data.records
      console.log(this.tableData)
    },
    // 搜索按钮
    searchBtn() {
      this.pageAreaDetail({ ...this.params, ...this.inputData })
    },
    // 重置按钮
    resetBtn() {
      this.params = {
        size: 10,
        current: 1
      }
      this.inputData = {}
      this.pageAreaDetail(this.params)
    },
    // 每展示条数改变时触发
    handleSizeChange(val) {
      // console.log(val)
      this.params.size = val
      this.pageAreaDetail(this.params)
    },
    // 页数改变时触发
    handleCurrentChange(val) {
      // console.log(val)
      this.params.current = val
      this.pageAreaDetail(this.params)
    },
    // 新增库区
    async addNewArea() {
      const { data } = await getNextCode('KQ')
      console.log(data)
      this.nextCode = data
      this.$router.push({
        name: 'AreaDetails',
        params: {
          code: this.nextCode
        }
      })
    },
    // 点击 编辑
    edit(row) {
      this.$router.replace({
        name: 'AreaDetails',
        params: {
          id: row.id
        }
      })
    },
    // 点击 停用/开启
    switchBtn(row) {
      console.log(row)
      this.id = row.id
      this.status = row.status
      this.name = row.name
      this.dialogVisible = true
    },
    // 点击 删除
    delBtn(row) {
      this.$confirm('确定删除该库区?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delArea(row.id)
        this.$message.success('删除成功！')
        this.pageAreaDetail(this.params)
      }).catch(() => {
        this.$message.info('取消删除！')
      })
    },
    // 确定
    async submit() {
      await changeArea({ status: Number(!this.status), id: this.id })
      this.dialogVisible = false
      this.$message.success('修改状态成功!')
      this.pageAreaDetail(this.params)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 25px;
}
.el-card {
  margin-bottom: 20px;
}
span {
  display: inline-block;
  color: #887e7e;
  font-size: 12px;
  margin-bottom: 5px;
}
.el-button {
  border-radius: 50px;
}
.topBtn {
  margin-top: 36px;
}
</style>
